<template>
  <div>
    <div class="user-tools">
      <el-button type="primary" @click="addUserHandle" icon="el-icon-plus">新增用户</el-button>
      <el-button v-if="isShowDelete" type="success" icon="el-icon-upload2" @click="exportUserExcelHandle">
        导出选中的用户
      </el-button>
      <el-button type="danger" v-if="isShowDelete" icon="el-icon-delete" @click="deleteAllUserHandle">
        选中删除用户
      </el-button>
    </div>
  </div>
</template>
      
<script>
//引入Excel相关配置文件   安装方式（ npm i -S xlsx）
import { utils, writeFile } from 'xlsx'
//引入数据处理方法
import { exportUserData } from '@/utils/tools'

export default {
  //父组件传来的方法,tableData作为Excel导出的数据
  props: ['selectUserIds', 'deleteAllUser','tableData'],
  methods: {
    //导出用户为Excel文件
     async exportUserExcelHandle(){
      const loading = this.$loading({    //加载组件内的用法
        lock: true,
        text: '玩命生成文件中，请稍等！',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      try {
        // 创建sheet表，把json数据导入为excel中的sheet数据类型
        //exportUserData(this.tableData)对原数据进行处理后返回新数据
        const sheet = utils.json_to_sheet(exportUserData(this.tableData))
        // 创建工作簿
        const workerBook = utils.book_new()
        //将工作簿放入sheet表
        utils.book_append_sheet(workerBook, sheet, '用户信息记录')
        // 将工作簿数据写入或下载到文件
        writeFile(workerBook, '用户信息记录.xlsx')
        this.$message({
          type: 'success',
          duration: 3000,
          message: '导出用户成功',
          onClose: () => {
            loading.close()
          }
        })
      } catch (error) {
        this.$message({
          type: 'error',
          duration: 3000,
          message: '导出失败',
          onClose: () => {
            loading.close()
          }
        })
      }
    },
    addUserHandle() {
      this.$emit('addUserHandle', true)
    },

    async deleteAllUserHandle() {
      // 确认框
      try {
        await this.$confirm('此操作将永久删除该选中用户, 是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        })
        await this.$message({
          type: 'success',
          duration: 3000,//弹框时长
          message: '删除用户成功',
          onClose: () => {
            this.deleteAllUser(this.selectUserIds)
          }
        })
      } catch (error) { }
    }
  },
  computed: {
    isShowDelete() {
      return this.selectUserIds.length > 0
    }
  }
}
</script>
  
<style  scoped>
.user-tools {
  background: #fff;
  padding: 10px;
  margin-top: 5px;
}
</style>
  